<template>
    <div class="content">
        <div class="login-box">
            <div class="login-from">
                <div class="title">登录</div>
                <!-- <div class="instructions">未注册的手机号验证后将自动创建新账号</div> -->
                <!-- <el-tabs v-model="activeName" class="demo-tabs">
                    <el-tab-pane label="登录" name="phone"> -->
                        <el-form v-loading="codeLoading" class="form-content" :model="formData" ref="ruleFormRef">
                            <el-form-item prop="phone">
                                <el-input v-model="formData.userAccount" placeholder="请输入账号" clearable>
                                    <!-- <template #prepend>+86</template> -->
                                </el-input>
                            </el-form-item>
                            <el-form-item prop="verificationCode">
                                <el-input v-model="formData.password" @keyup.enter.native="login" placeholder="请输入密码"
                                     clearable type="password">
                                </el-input>
                            </el-form-item>
                        </el-form>
                    <!-- </el-tab-pane> -->
                    <!-- <el-tab-pane label="注册" name="email">
                        <el-form v-loading="codeLoading" class="form-content" :model="formData"  ref="ruleFormRefEmail">
                            <el-form-item  prop="email">
                                <el-input v-model="formData.email" placeholder="请输入邮箱"
                                    clearable>
                                </el-input>
                            </el-form-item>
                            <el-form-item prop="verificationCode">
                                <el-input v-model="formData.verificationCode" @keyup.enter.native="login"
                                    placeholder="请输入验证码"
                                    :class="{ active: timing === 0 && formData.email }" maxlength="6" clearable>
                                </el-input>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane> -->
                <!-- </el-tabs> -->
                <el-button class="login-btn" size="large" type="primary" round @click="login" :loading="loginLoading">
                    立即登录
                </el-button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import userApi from '@/api/user'
import { setToken } from '@/utils/index'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'

const Route = useRoute()
const router = useRouter()

const ruleFormRef = ref<FormInstance>()
const ruleFormRefEmail = ref<FormInstance>();

let codeLoading = ref(false)
let loginLoading = ref(false)
let timing = ref(0)
const activeName = ref('phone')

const formData = reactive({
    password: '',
    userAccount: ''
})


const agreementChecked = ref(false)
// 登录
const login = () => {
    userApi.login(formData).then((res:any)=>{
        console.log(res)
        setToken(res.token)
        ElMessage.success('登录成功')
        router.push({
            name: 'home'
        })
    })
    console.log('honm')
}
</script>

<style lang="scss" scoped>
.content {
    min-height: 100vh;
    width: 100vw;
    background: #f2f3f4;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    .logo-img {
        width: 300px;
        margin-bottom: 50px;
        margin-top: 9vh;
    }

    .login-box {
        width: 430px;
        background: #fff;
        padding: 20px;
        height: fit-content;
        border-radius: 12px;

        .login-from {
            padding: 10px 15px;
            ::v-deep(.el-tabs__item) {
                font-size: 16px;
            }

            .title {
                font-size: 21px;
                color: #333;
                font-weight: bold;
                margin-bottom: 10px;
                text-align: center;
                margin-bottom: 30px;
            }

            .instructions {
                color: #aaa;
                margin-bottom: 15px;
            }

            .verificationCode {
                margin-top: 26px;
            }

            .login-btn {
                width: 100%;
                margin-top: 15px;
                padding: 24px 0px;
                border-radius: 1000px;
                font-size: 16px;
            }

            ::v-deep(.el-input__inner) {
                height: 48px;
                font-size: 16px;
            }

            ::v-deep(.el-input-group__append) {
                padding: 0px;
            }

            .get-code {
                height: 48px;
                line-height: 48px;
                padding: 0px 12px;
                vertical-align: middle;
                display: table-cell;
            }

            .active {
                ::v-deep(.el-input-group__append) {
                    border-color: #ff492c;
                }

                .get-code {
                    cursor: pointer;
                    background: #ff492c;
                    color: #fff;
                }
            }
        }

        .agreement {
            margin-top: 30px;
            text-align: center;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #606266;

            .link {
                color: #ff492c;
                cursor: pointer;
                text-decoration: none;
            }

            :deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
                color: inherit;
            }
        }
    }
}

.Record {
    position: fixed;
    bottom: 10px;
    text-align: center;
    color: #888;
    left: 0px;
    right: 0px;
    font-size: 14px;
}
</style>